<!--  语言管理 -->
<template>
  <div class="app-container">
    <el-form size="small" :inline="true">
      <span style="line-height: 28px;">语言列表</span>
      <el-button
        style="float: right"
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="handleAddNew"
        >新增</el-button
      >
    </el-form>
    <!-- table -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      style="padding-top: 20px"
    >
      <el-table-column
        prop="chineseName"
        label="语言名称(中文)"
      ></el-table-column>
      <el-table-column
        prop="nativeName"
        label="语言名称(本国语)"
      ></el-table-column>
      <el-table-column
        prop="i18nCode"
        label="ISO 639 语言代码"
      ></el-table-column>
      <el-table-column label="状态">
        <span
          slot-scope="scope"
          :style="{
            color: scope.row.status == 'ENABLE' ? '#52C41AFF' : '#FF000DFF',
          }"
          >{{ scope.row.statusName }}</span
        >
      </el-table-column>
      <el-table-column label="默认语言">
        <template slot-scope="scope">
          {{ scope.row.defaultI18n ? "是" : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间">
        <template slot-scope="scope">{{
          parseTime(scope.row.createTime)
        }}</template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <a
            style="color: #ff000dff; font-size: 14px"
            @click="handleControl('DEL', scope.row)"
            v-if="scope.row.status == 'DISABLE'"
            >删除</a
          >
          <a
            style="margin-left: 14px; color: #fa8c16ff; font-size: 14px"
            v-if="scope.row.status == 'ENABLE'"
            @click="handleControl('DISABLE', scope.row)"
            >禁用</a
          >
          <a
            style="margin-left: 14px; color: #52c41aff; font-size: 14px"
            v-if="scope.row.status == 'DISABLE'"
            @click="handleControl('ENABLE', scope.row)"
            >启用</a
          >
          <a
            style="margin-left: 14px; color: #1890ffff; font-size: 14px"
            @click="handleEdit(scope.row)"
            >编辑</a
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getListHttpRequest"
    />
    <!-- 控制操作确认弹窗 -->
    <controlDialog
      :dialogData="controlDialogData"
      @dialogConfirm="refreshList"
    ></controlDialog>
    <!-- 新增编辑弹窗 -->
    <addEditDialog
      :dialogData="addEditDialogData"
      @dialogConfirm="getListHttpRequest"
    ></addEditDialog>
  </div>
</template>
  
<script>
import controlDialog from "./components/control-dialog.vue";
import addEditDialog from "./components/add-edit-dialog.vue";
import { getLangList } from "@/api/lang_manage";

export default {
  components: {
    controlDialog,
    addEditDialog,
  },
  data() {
    return {
      langList: [],
      // 列表数据
      list: [],
      listLoading: false,
      total: 0,
      listQuery: {
        pageNum: 1, //页码 默认1
        pageSize: 10, //页大小 默认10
      },
      //控制操作确认弹窗
      controlDialogData: {
        show: false,
        type: "ENABLE",
        status: "DISABLE",
        chineseName: "",
        nativeName: "",
        code: "",
      },
      //新增/编辑弹窗
      addEditDialogData: {
        show: false,
        type: "ADD",
        status: "DISABLE",
        chineseName: "",
        nativeName: "",
        code: "",
      },
    };
  },
  mounted() {
    this.getListHttpRequest();
  },
  methods: {
    //重置筛选条件
    resetFilterForm() {
      this.$refs.form.resetFields();
    },

    //根据筛选条件进行查询
    submitFilterForm() {
      this.listQuery = {
        pageNum: 1,
        pageSize: 10,
        ...this.filterFormData,
      };
      this.getListHttpRequest();
    },
    //列表请求
    getListHttpRequest() {
      this.listLoading = true;
      getLangList(this.listQuery)
        .then((response) => {
          this.total = response.data.total;
          this.list = response.data.list;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    //控制操作  启用/禁用/删除
    handleControl(controlType, rowData) {
      switch (controlType) {
        //启用
        case "ENABLE": {
          this.controlDialogData = {
            show: true,
            type: controlType,
            ...rowData,
          };
          break;
        }
        //禁用
        case "DISABLE": {
          this.controlDialogData = {
            show: true,
            type: controlType,
            ...rowData,
          };
          break;
        }
        //删除
        case "DEL": {
          this.controlDialogData = {
            show: true,
            type: controlType,
            ...rowData,
          };
          break;
        }
        default: {
          this.$message.error("类型异常");
          this.controlDialogData = {
            show: false,
            type: "ENABLE",
            status: "DISABLE",
            chineseName: "",
            nativeName: "",
            code: "",
          };
          break;
        }
      }
    },
    //新增
    handleAddNew() {
      this.addEditDialogData = {
        show: true,
        type: "ADD",
        status: "DISABLE",
        chineseName: "",
        nativeName: "",
        code: "",
      };
    },

    //编辑
    handleEdit(row) {
      console.log(row);
      this.addEditDialogData = {
        show: true,
        type: "EDIT",
        ...row,
      };
    },

    //删除成功 刷新列表
    refreshList(type) {
      if (
        type == "DEL" &&
        this.list.length == 1 &&
        this.listQuery.pageNum > 1
      ) {
        this.listQuery.pageNum -= 1;
      }
      this.getListHttpRequest();
    },
  },
};
</script>
  
<style></style>